<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import ComboBox from './ComboBox.vue';
import { theme, setColorTheme, setCustomColor, setInterfaceConfig, setFileIconTheme, setProductIconTheme, subscribe } from '../assets/theme.js';

const { t } = useI18n();

// 基本主题设置
const colorMode = ref(theme.colorTheme);
const fileIconTheme = ref(theme.fileIconTheme);
const productIconTheme = ref(theme.productIconTheme);

// 自定义颜色设置
const customColors = ref({
  light: { ...theme.customColors.light },
  dark: { ...theme.customColors.dark }
});

// 界面配置
const interfaceConfig = ref({ ...theme.interface });

// 预设主题
const presetThemes = ref([
  {
    name: 'Default Blue',
    colors: {
      light: { accent: '#3b82f6', accentContrast: '#ffffff' },
      dark: { accent: '#60a5fa', accentContrast: '#0a0a0a' }
    }
  },
  {
    name: 'Green Nature',
    colors: {
      light: { accent: '#10b981', accentContrast: '#ffffff' },
      dark: { accent: '#34d399', accentContrast: '#0a0a0a' }
    }
  },
  {
    name: 'Purple Magic',
    colors: {
      light: { accent: '#8b5cf6', accentContrast: '#ffffff' },
      dark: { accent: '#a78bfa', accentContrast: '#0a0a0a' }
    }
  },
  {
    name: 'Orange Sunset',
    colors: {
      light: { accent: '#f59e0b', accentContrast: '#ffffff' },
      dark: { accent: '#fbbf24', accentContrast: '#0a0a0a' }
    }
  },
  {
    name: 'Pink Rose',
    colors: {
      light: { accent: '#ec4899', accentContrast: '#ffffff' },
      dark: { accent: '#f472b6', accentContrast: '#0a0a0a' }
    }
  }
]);

// 当前编辑的模式
const editingMode = ref('light');

// 监听主题变化
onMounted(() => {
  const unsubscribe = subscribe((updatedTheme) => {
    colorMode.value = updatedTheme.colorTheme;
    fileIconTheme.value = updatedTheme.fileIconTheme;
    productIconTheme.value = updatedTheme.productIconTheme;
    customColors.value = { ...updatedTheme.customColors };
    interfaceConfig.value = { ...updatedTheme.interface };
  });
  
  return unsubscribe;
});

// 选项配置
const colorThemeOptions = computed(() => [
  { label: t('app.system'), value: 'system' },
  { label: t('app.light'), value: 'light' },
  { label: t('app.dark'), value: 'dark' }
]);

const fileIconThemeOptions = [
  { label: 'VS Code Icons', value: 'vscode' },
  { label: 'Minimal Icons', value: 'minimal' },
  { label: 'No Icons', value: 'none' }
];

const productIconThemeOptions = [
  { label: 'Codicons', value: 'codicon' },
  { label: 'Lucide', value: 'lucide' },
  { label: 'Feather', value: 'feather' }
];

const fontSizeOptions = [
  { label: t('theme.font_size_small') || 'Small', value: 'small' },
  { label: t('theme.font_size_medium') || 'Medium', value: 'medium' },
  { label: t('theme.font_size_large') || 'Large', value: 'large' }
];

const densityOptions = [
  { label: t('theme.density_compact') || 'Compact', value: 'compact' },
  { label: t('theme.density_comfortable') || 'Comfortable', value: 'comfortable' },
  { label: t('theme.density_spacious') || 'Spacious', value: 'spacious' }
];

const borderRadiusOptions = [
  { label: t('theme.radius_none') || 'None', value: 'none' },
  { label: t('theme.radius_small') || 'Small', value: 'small' },
  { label: t('theme.radius_medium') || 'Medium', value: 'medium' },
  { label: t('theme.radius_large') || 'Large', value: 'large' }
];

// 事件处理
function onUpdateColorTheme(value) {
  colorMode.value = value;
  setColorTheme(value);
}

function onUpdateFileIconTheme(value) {
  fileIconTheme.value = value;
  setFileIconTheme(value);
}

function onUpdateProductIconTheme(value) {
  productIconTheme.value = value;
  setProductIconTheme(value);
}

function onUpdateCustomColor(mode, colorKey, value) {
  customColors.value[mode][colorKey] = value;
  setCustomColor(mode, colorKey, value);
}

function onUpdateInterfaceConfig(key, value) {
  interfaceConfig.value[key] = value;
  setInterfaceConfig(key, value);
}

function applyPresetTheme(preset) {
  Object.entries(preset.colors).forEach(([mode, colors]) => {
    Object.entries(colors).forEach(([colorKey, value]) => {
      onUpdateCustomColor(mode, colorKey, value);
    });
  });
}

function resetToDefaults() {
  // 重置为默认值
  const defaultColors = {
    light: {
      accent: '#3b82f6',
      accentContrast: '#ffffff',
      panelBg: '#ffffff',
      panelFg: '#0f172a',
      appBg: '#f8fafc',
      appFg: '#0f172a',
    },
    dark: {
      accent: '#60a5fa',
      accentContrast: '#0a0a0a',
      panelBg: '#222426',
      panelFg: '#d4d4d4',
      appBg: '#222426',
      appFg: '#d4d4d4',
    }
  };
  
  Object.entries(defaultColors).forEach(([mode, colors]) => {
    Object.entries(colors).forEach(([colorKey, value]) => {
      onUpdateCustomColor(mode, colorKey, value);
    });
  });
  
  // 重置界面配置
  const defaultInterface = {
    fontSize: 'medium',
    density: 'comfortable',
    borderRadius: 'medium',
    animations: true,
  };
  
  Object.entries(defaultInterface).forEach(([key, value]) => {
    onUpdateInterfaceConfig(key, value);
  });
}
</script>

<template>
  <div class="theme-settings space-y-6">
    <!-- 基本主题设置 -->
    <div class="space-y-4">
      <h3 class="text-sm font-medium text-panel-fg border-b border-panel-border pb-2">
        {{ t('theme.basic_settings') || '基本设置' }}
      </h3>
      
      <div class="grid grid-cols-1 gap-3">
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('app.theme_label') }}</label>
          <ComboBox 
            :modelValue="colorMode" 
            @update:modelValue="onUpdateColorTheme"
            :options="colorThemeOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="140" 
          />
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.file_icons') || '文件图标' }}</label>
          <ComboBox 
            :modelValue="fileIconTheme" 
            @update:modelValue="onUpdateFileIconTheme"
            :options="fileIconThemeOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="140" 
          />
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.product_icons') || '产品图标' }}</label>
          <ComboBox 
            :modelValue="productIconTheme" 
            @update:modelValue="onUpdateProductIconTheme"
            :options="productIconThemeOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="140" 
          />
        </div>
      </div>
    </div>

    <!-- 预设主题 -->
    <div class="space-y-4">
      <h3 class="text-sm font-medium text-panel-fg border-b border-panel-border pb-2">
        {{ t('theme.preset_themes') || '预设主题' }}
      </h3>
      
      <div class="grid grid-cols-2 gap-2">
        <button
          v-for="preset in presetThemes"
          :key="preset.name"
          @click="applyPresetTheme(preset)"
          class="p-3 rounded border border-panel-border bg-panel-bg hover:bg-subtle-bg transition-colors text-left"
        >
          <div class="flex items-center gap-2 mb-2">
            <div 
              class="w-4 h-4 rounded-full border border-panel-border"
              :style="{ backgroundColor: preset.colors.light.accent }"
            ></div>
            <span class="text-xs font-medium text-panel-fg">{{ preset.name }}</span>
          </div>
          <div class="text-xs text-muted-fg">{{ preset.name }} color scheme</div>
        </button>
      </div>
    </div>

    <!-- 自定义颜色 -->
    <div class="space-y-4">
      <div class="flex items-center justify-between border-b border-panel-border pb-2">
        <h3 class="text-sm font-medium text-panel-fg">
          {{ t('theme.custom_colors') || '自定义颜色' }}
        </h3>
        <div class="flex items-center gap-1">
          <button
            v-for="mode in ['light', 'dark']"
            :key="mode"
            @click="editingMode = mode"
            class="px-2 py-1 text-xs rounded border border-panel-border transition-colors"
            :class="editingMode === mode 
              ? 'bg-accent text-accent-contrast' 
              : 'bg-panel-bg text-panel-fg hover:bg-subtle-bg'"
          >
            {{ mode === 'light' ? (t('app.light') || '浅色') : (t('app.dark') || '深色') }}
          </button>
        </div>
      </div>
      
      <div class="grid grid-cols-1 gap-3">
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.accent_color') || '强调色' }}</label>
          <div class="flex items-center gap-2">
            <input
              type="color"
              :value="customColors[editingMode].accent"
              @input="onUpdateCustomColor(editingMode, 'accent', $event.target.value)"
              class="w-8 h-8 rounded border border-panel-border cursor-pointer"
            />
            <input
              type="text"
              :value="customColors[editingMode].accent"
              @input="onUpdateCustomColor(editingMode, 'accent', $event.target.value)"
              class="flex-1 px-2 py-1 text-xs rounded border border-panel-border bg-panel-bg text-panel-fg outline-none focus:border-accent"
              placeholder="#3b82f6"
            />
          </div>
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.panel_bg') || '面板背景' }}</label>
          <div class="flex items-center gap-2">
            <input
              type="color"
              :value="customColors[editingMode].panelBg"
              @input="onUpdateCustomColor(editingMode, 'panelBg', $event.target.value)"
              class="w-8 h-8 rounded border border-panel-border cursor-pointer"
            />
            <input
              type="text"
              :value="customColors[editingMode].panelBg"
              @input="onUpdateCustomColor(editingMode, 'panelBg', $event.target.value)"
              class="flex-1 px-2 py-1 text-xs rounded border border-panel-border bg-panel-bg text-panel-fg outline-none focus:border-accent"
              :placeholder="editingMode === 'light' ? '#ffffff' : '#222426'"
            />
          </div>
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.app_bg') || '应用背景' }}</label>
          <div class="flex items-center gap-2">
            <input
              type="color"
              :value="customColors[editingMode].appBg"
              @input="onUpdateCustomColor(editingMode, 'appBg', $event.target.value)"
              class="w-8 h-8 rounded border border-panel-border cursor-pointer"
            />
            <input
              type="text"
              :value="customColors[editingMode].appBg"
              @input="onUpdateCustomColor(editingMode, 'appBg', $event.target.value)"
              class="flex-1 px-2 py-1 text-xs rounded border border-panel-border bg-panel-bg text-panel-fg outline-none focus:border-accent"
              :placeholder="editingMode === 'light' ? '#f8fafc' : '#222426'"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 界面配置 -->
    <div class="space-y-4">
      <h3 class="text-sm font-medium text-panel-fg border-b border-panel-border pb-2">
        {{ t('theme.interface_config') || '界面配置' }}
      </h3>
      
      <div class="grid grid-cols-1 gap-3">
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.font_size') || '字体大小' }}</label>
          <ComboBox 
            :modelValue="interfaceConfig.fontSize" 
            @update:modelValue="(v) => onUpdateInterfaceConfig('fontSize', v)"
            :options="fontSizeOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="120" 
          />
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.ui_density') || '界面密度' }}</label>
          <ComboBox 
            :modelValue="interfaceConfig.density" 
            @update:modelValue="(v) => onUpdateInterfaceConfig('density', v)"
            :options="densityOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="120" 
          />
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.border_radius') || '圆角大小' }}</label>
          <ComboBox 
            :modelValue="interfaceConfig.borderRadius" 
            @update:modelValue="(v) => onUpdateInterfaceConfig('borderRadius', v)"
            :options="borderRadiusOptions"
            :searchable="false" 
            size="sm" 
            :minWidth="120" 
          />
        </div>
        
        <div class="flex items-center gap-3">
          <label class="w-32 text-xs text-muted-fg">{{ t('theme.animations') || '动画效果' }}</label>
          <input
            type="checkbox"
            :checked="interfaceConfig.animations"
            @change="onUpdateInterfaceConfig('animations', $event.target.checked)"
            class="rounded border border-panel-border"
          />
        </div>
      </div>
    </div>

    <!-- 重置按钮 -->
    <div class="pt-4 border-t border-panel-border">
      <button
        @click="resetToDefaults"
        class="px-4 py-2 text-sm rounded border border-panel-border bg-panel-bg text-panel-fg hover:bg-subtle-bg transition-colors"
      >
        {{ t('theme.reset_defaults') || '重置为默认' }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.theme-settings {
  font-size: 13px;
}

.theme-settings input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.theme-settings input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.theme-settings input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: 4px;
}
</style>